<template>
	<view>
		<image src="@/static/account/bg.png" class="bg" mode="widthFix"></image>
		<image src="@/static/account/bottom.png" class="bottomBg" mode="widthFix"></image>
		<view class="Copyright">
			浙ICP备18041796号-10 Copyright@ 2024
		</view>
		<view class="container">
			<view class="logo">
				<image src="@/static/account/login-logo.png" mode=""></image>
				<view class="text">
					<image class="icon" src="@/static/account/login-icon.png" mode=""></image> Never resell your gift cards to
					third parties!
				</view>
				<view class="slogan">
					Fast, Safety.Top Rates
				</view>
			</view>
			<view class="form">
				<view class="title">
					<text>SIGN UP</text>
					<text>卡片收集</text>
				</view>
				<view class="text">
					Sign in and start trading to make money right away
				</view>

				<!-- 基础表单校验 -->
				<uni-forms ref="form" :rules="rules" :modelValue="form" label-position="top" :label-width="300">
					<uni-forms-item label="Your Email" required name="username">
						<uni-easyinput v-model="form.username" placeholder="Confim your email" />
					</uni-forms-item>
					<uni-forms-item label="Password" required name="password">
						<uni-easyinput v-model="form.password" type="password" placeholder="Confim your password" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="tips Forget">
				<text @click="goUrl('./find')">Forget password?</text>
			</view>
			<view class="submitBtn" @click="submit">
				Login
			</view>
			<view class="tips">
				Don't have an account? <text @click="goUrl('./signup')">Sign up</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					invite_code:'',
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					}
				},
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					this.$post("/user/login", this.form).then(res => {
						uni.setStorage({
							data: res.data.userinfo.token,
							key: "token"
						})
						uni.redirectTo({
							url: "/pages/index"
						})
					})

				})
			},
			goUrl(url) {
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
	}

	.bottomBg {
		position: fixed;
		width: 605rpx;
		left: 50%;
		bottom: 22rpx;
		transform: translateX(-50%);
	}

	.Copyright {
		position: fixed;
		bottom: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #0C0E27;
		opacity: 0.5;
	}

	.container {
		position: relative;
		padding: 0 55rpx;
		padding-top: 180rpx;

		.logo {
			text-align: center;
			font-size: 22rpx;
			margin-bottom: 60rpx;

			.slogan {
				display: inline-block;
				background: #161618;
				border-radius: 19rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 38rpx;
				padding: 0 20rpx;
				margin-top: 10rpx;
			}

			.text {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 23rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}
			}

			image {
				width: 300rpx;
				height: 74rpx;
			}
		}

		.tips {
			font-size: 26rpx;
			text-align: center;

			text {
				color: $main-color;
			}
		}

		.Forget {
			text-align: right;
		}

		.submitBtn {
			margin: 70rpx 0 40rpx;
		}


		.form {
			text-align: center;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 48rpx;
				font-weight: bold;
			}



			.text {
				font-size: 26rpx;
				color: #999;
				margin: 10rpx 0;
			}
		}
	}

	/deep/ .uni-forms-item__label {
		font-size: 32rpx;
		color: #0C0E27;
		height: 36px;
	}
</style>